<template>
  <div class="myPerformanceCode">
    <!--    导航开始-->
    <commonHeader
      :title="title"
      :subtitle="subtitle"
      @goBack="goBack()"
      @goSubtitle="goSubtitle()">
    </commonHeader>
    <div class="content">
      <div class="codeContent">
        <div class="schoolName">{{performanceCode.school_name}}</div>
        <div class="schoolTel">{{performanceCode.school_tel}}</div>
        <canvas id="canvas"></canvas>
        <div class="describe">扫一扫上边的二维码，立即报名</div>
      </div>
    </div>

  </div>
</template>

<script>
  import commonHeader from "../../components/common/commonHeader.vue"
  import QRCode from 'qrcode'
  export default {
    name:"myPerformanceCode",
    components:{
      commonHeader,
    },
    data() {
      return {
        title:"报名码",//标题
        subtitle:'',//副标题
        performanceCode:{},
        token:""
      }
    },
    mounted() {
      // 生成二维码参数
      this.codeInit()
    },
    methods:{
      codeInit(){
        // 获取报名码信息
        this.performanceCode = JSON.parse(this.getStore("performanceCode"))
        // 如果有参数 生成二维码
        if(this.performanceCode){
          // 生成二维码
          this.qrcode()
        }
      },
      // 返回
      goBack(){
        this.$router.back()
      },
      //生成二维码；
      qrcode () {
        // 获取链接
        // https://faged.hongjitimes.com/signUp
        // let links = window.location.origin + "/signUp?title=" + this.performanceCode.school_name + '&id=' + this.performanceCode.school_id + '&token=' + this.token
        let links = "https://faged.hongjitimes.com/signUp?title=" + this.performanceCode.school_name + '&id=' + this.performanceCode.school_id
        // 获取二维码
        const canvas = document.getElementById('canvas');
        QRCode.toCanvas(canvas, links,
          (error) => {
            if (error) console.error(error);
          });
      },
    }
  }
</script>

<style lang='less' scoped>
  @import (reference) url(../../assets/less/common);
  .myPerformanceCode {
    width:100%;
    padding-top:1.38rem;
    box-sizing: border-box;
    .content{
      width:100%;
      padding:1.4rem 0.3rem 0 0.3rem;
      box-sizing: border-box;
      .codeContent{
        width:100%;
        padding:0.4rem 0.3rem;
        box-sizing: border-box;
        border-radius: 0.1rem;
        background:#232323;
        .schoolName{
          font-size:@fontSize34;
          font-family:@fontFamily400;
          font-weight:@fontWeight500;
          color:@whiteColor;
          line-height: 0.34rem;
        }
        .schoolTel{
          font-size:@fontSize30;
          font-family:@fontFamily400;
          font-weight:@fontWeight400;
          color:#999999;
          line-height: 0.3rem;
          margin:0.2rem 0 0.4rem 0;
        }
        #canvas{
          width:6.3rem !important;
          height:6.3rem !important;
        }
        .describe{
          width:100%;
          margin-top:0.28rem;
          font-size:@fontSize30;
          font-family:@fontFamily400;
          font-weight:@fontWeight400;
          color:#999999;
          line-height: 0.3rem;
          text-align: center;
        }
      }
    }
  }
</style>
